<template>
  <div id="card-progress">
    <el-dialog
      modal-class="loading-modal"
      v-model="visable"
      width="500"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
    
    <div v-if="allErrTotal==(allFinishedTotal+successNumber)&&allErrNumber==successNumber">
           <el-result
        icon="success"
        :title="$t('merak.batch_finished')"
        :sub-title="$t('merak.all_data_edit_finished')"
      > 
      </el-result>
    </div>
    <div v-else>
        <div class="title">
        <span class="cur-status">{{ currNumber }}</span
        ><span class="line">/</span>
        <span>{{ allErrNumber }}</span>
      </div>
     
      <div class="progress">
       
        <div class="pro-in" :style="{ width: progress }" :class="{'progress-ani':(currNumber!=allErrNumber)}"></div>
      </div>
      <div class="loading-text">
       
        <span class="text" v-if="currNumber != allErrNumber">{{$t('merak.batch_submit_loading')}}</span>
        <span class="err " v-else-if="allErrTotal!=(allFinishedTotal+successNumber)&&allErrNumber==successNumber">
          <!-- <span>已完成当前页所有错误数据，是否<span class="contunit_edit" @click="contunitEdit('other')">{{$t("merak.batch_edit_continue")}}</span>剩余条数</span> -->
           <span>{{$t('merak.batch_finished_part')}}<span class="contunit_edit" @click="contunitEdit('other')">{{$t("merak.batch_edit_continue")}}</span>{{$t("merak.batch_finished_others")}}</span>
        </span>
        <span v-else>
          <!-- <span class="err text2"
            >当前已提交成功<span class="succTxt">{{ successNumber }}</span
            >条,剩余错误<span class="errTxt">{{ errorNumber }}</span
            >条</span  > -->
             <span class="err text2"
            >{{$t('merak.batch_success_tip')}}<span class="succTxt">{{ successNumber }}</span>{{$t('merak.batch_strip')}},
            {{$t('merak.batch_other_err')}}<span class="errTxt">{{ errorNumber }}</span  >{{$t('merak.batch_strip')}}</span  >
          <span class="contunit_edit" @click="contunitEdit">{{$t("merak.batch_edit_continue")}}</span>
        </span>
       
      </div>
    </div>
    
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import number from "@/directives/modules/input";
import { ref, reactive, computed, watch, h, nextTick, onMounted, useSlots, onUnmounted } from "vue";
import {
  moreConfirm,
  confirmWarningMsg,
  successMsg,
  warnMsg,
  failMsg,
  confirmSuccessMsg,
  delConfimMsg
} from "@/utils/messageUtils";
const props = defineProps({
  //是否选中
  isShowProgress: {
    type: Boolean,
    default: false
  },
  allErrNumber: {
    //所有提交条数
    type: Number,
    default: 0
  },
  currNumber: {
    //当前提交条数
    type: Number,
    default: 0
  },
  successNumber: {
    //失败条数
    type: Number,
    default: 0
  },
  errorNumber: {
    //成功条数
    type: Number,
    default: 0
  },
  allErrTotal: {
    //所有错误条数
    type: Number,
    default: 0
  },
  allFinishedTotal:{
      //所有已完成错误条数
    type: Number,
    default: 0
  }
});
 

const visable = computed(() => {
  return props.isShowProgress;
});
const progress = computed(() => {
  return (props.currNumber / props.allErrNumber) * 100 + "%";
  // return '50%' ;
});

const handleClose = () => {
  window.close();
  // confirmSuccessMsg({
  //   msg: "是否确认关闭当前编辑区域???",
  //   callback: val => {
  //     console.log(val, "成功confirm还是失败cancel");
  //     if (val == "confirm") {
  //       window.close();
  //     }
  //   }
  // });
};

// emit
const emit = defineEmits<{
  contunitEdit: [value: any];
}>();
const contunitEdit = (params) => {
  emit("contunitEdit",params);
};
</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
